<template>
    <div class="container">
        <!-- 侧栏 -->
		<Sidebar/>
		<!-- 头部 -->
		<Header/>
        <div class="content Gwidth">
            <div class="tabNav">
                <div class="item" 
                v-for="item in tab_list" 
                :key="item.article_cate_id" 
                :class="{active:tabNav==item.article_cate_id}" 
                >
                    <nuxt-link :to="'/news/'+item.article_cate_id">{{item.article_cate_name}}</nuxt-link>
                </div>
            </div>
            <div class="cont">
                <div class="item" v-for="item in news_list" :key="item.article_id">
                    
                    <div class="img">
                        <nuxt-link :to="'/news/detail/'+item.article_id">
                            <img :src="item.article_img" :alt="item.title" :title="item.title">
                        </nuxt-link>
                    </div>
                    <div class="item_cont">
                        <nuxt-link :to="'/news/detail/'+item.article_id">
                            <h1>{{item.title}}</h1>
                            <div class="des">
                                <span>{{item.custer}}</span>
                                <span>{{item.create_time}}</span>
                            </div>
                        </nuxt-link>
                        
                    </div>
                </div>
            </div>
            <div class="loadingMore Noselect">
				<Icon v-show="loadingMore =='loading'" type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
				{{status}}
			</div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import Header from "~/components/Header.vue";
import Sidebar from "~/components/Sidebar.vue";
import API from '@/http/api'
import http from '@/http/http.js'
export default {
    components: {
		Header,
		Sidebar
	},
    data(){
        return{
            tabNav:0,//当前分类
            loadingMore:'loadmore',//加载更多
			page:2,
			limit:10,
            news_list:[],
            tab_list:[]

        }
    },
    created(){
        // this.getArticleCateList()
    },
    computed:{
		...mapState(['address']),
        status(){

			return this.loadingMore=="loading"?'加载中':this.loadingMore=="nomore"?'暂无数据':'加载更多'
		}
	},
    async asyncData ({ store, params,route }) {
        let{data:{code:article_code,data:article_cate}} = await http.post(API.news.getArticleCateList,{})
        let{data:{code,data}} = await http.post(API.news.getChildArticleList,{
            article_cate_id:route.params.id,
            page:1,
            limit:10
        })
        let loadingMore='loadmore'
        if (code==200) {
			if (data.data.length>=10) {
				loadingMore = 'loadmore'
			}else{
				loadingMore = 'nomore'
			}
		}else{
			loadingMore = 'nomore'
		}
        return{
			tab_list : article_cate.data,
            tabNav  :  route.params.id,
            news_list : data.data,
            loadingMore:loadingMore
        }
    },
    mounted(){
        
    },
    methods:{
        // 切换分类
        ChangeTabNav(e){
            this.tabNav = e
            this.page = 1
            this.news_list = []
            this.getChildArticleList()
        },
        // 分类列表
        async getArticleCateList(){
            let{data:{code,data}} = await this.$http.post(this.$API.news.getArticleCateList,{})
            if(code==200){
                this.tab_list = data.data
                this.tabNav = data.data[0].article_cate_id
                this.getChildArticleList()
            }
        },
        //文章列表
        async getChildArticleList(){
            this.loadingMore = 'loading'
            let{data:{code,data}} = await this.$http.post(this.$API.news.getChildArticleList,{
                article_cate_id:this.tabNav,
                page:this.page,
                limit:this.limit
            })
            if (code==200) {
				if (data.data.length>=this.limit) {
					this.loadingMore = 'loadmore'
				}else{
					this.loadingMore = 'nomore'
				}
				if (data.data.length>0) {
					this.news_list = this.news_list.concat(data.data)
					this.page += 1
				}
			}else{
				this.loadingMore = 'nomore'
			}
        }
    },
}
</script>
<style scoped>
    .container .content .tabNav{
        display: flex;
        align-items: center;
        margin: 32px 0;
    }
    .container .content .tabNav .item a{
        font-size: 20px;
        font-weight: 400;
        color: #666666;
        margin-right: 52px;
        -moz-user-select:none;/*火狐*/
        -webkit-user-select:none;/*webkit浏览器*/
        -ms-user-select:none;/*IE10*/
        -khtml-user-select:none;/*早期浏览器*/
        user-select:none;
        cursor: pointer;
    }
    .container .content .tabNav .item.active a{
        font-weight: bold;
        color: #333333;
    }
    .container .content .item{
        display: flex;
        align-items: center;
        margin-bottom: 30px;
    }
    .container .content .item .img{
        width: 150px;
        height: 100px;
        margin-right: 23px;
    }
    .container .content .item .img img{
        width: 100%;
        height: 100%;
    }
    .container .content .item .item_cont{
        width: calc(100% - 180px);
    }
    .container .content .item h1{
        
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 16px;
    }
    .container .content .item span{
        font-size: 14px;
        font-weight: 400;
        color: #999999;
    }
</style>
